<template>
  <view>
    <view
      v-if="loveObj.petDonateLoveRecordDetail.length > 0"
      class="love-list"
    >
      <view class="love-count">
        <view class="data-all">
          <text>累计收到价值</text>
          <text class="count">{{ loveObj.totalPetRation }}g</text>
          <text>的口粮</text>
          <text v-if="loveObj.totalMeal > 1">
            <text>,可供它饱餐</text>
            <text class="count">{{ loveObj.totalMeal }}</text>
            顿
          </text>
        </view>
        <view class="list-all">
          <view class="all flex align-center">
            <image
              src="../../../static/detail/love.png"
              style="width: 64rpx; height: 62rpx"
            ></image>
            <view class="all-text">鸣谢每一位捐助者</view>
          </view>
          <view
            class="donate-all flex align-center"
            @click="adoptall"
          >
            <text>全部捐助记录</text>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
      <view
        v-for="(item, index) in loveObj.petDonateLoveRecordDetail"
        :key="index"
        class="love-rank"
        :class="{ one: index === 0, two: index === 1, three: index === 2 }"
      >
        <view class="flex align-center justify-sb">
          <view class="flex align-center">
            <view
              class="index"
              :class="{
                one: index === 0,
                two: index === 1,
                three: index === 2,
              }"
            >
              {{ index + 1 }}
            </view>
            <view class="love-top">
              <image
                v-if="index === 0"
                src="../../../static/detail/one.png"
                style="width: 108rpx; height: 120rpx"
              ></image>
              <image
                v-if="index === 1"
                src="../../../static/detail/three.png"
                style="width: 108rpx; height: 120rpx"
              ></image>
              <image
                v-if="index === 2"
                src="../../../static/detail/two.png"
                style="width: 108rpx; height: 120rpx"
              ></image>
            </view>
            <view class="love-images">
              <image
                :src="item.avatar"
                style="width: 44px; height: 44px; border-radius: 44px"
              ></image>
            </view>

            <view class="rank-name">{{ item.nickname }}</view>
            <view
              v-if="item.badge"
              class="rank-tag"
            >
              {{ item.badge }}
            </view>
          </view>
          <view
            v-if="item.loveValue"
            class="flex align-center"
          >
            <text class="count-name">爱心值</text>
            <text class="count">
              {{ item.loveValue }}
            </text>
          </view>
        </view>
      </view>
      <view class="ten flex align-center">
        <image
          src="../../../static/detail/rank@2x.png"
          style="width: 32rpx; height: 28rpx"
        ></image>
        <text class="ten-text">榜单展示爱心值TOP10</text>
      </view>
      <adopt-popup
        v-model="adoptVisible"
        :list="list"
      ></adopt-popup>
    </view>
    <view
      v-else
      style="margin: 160rpx 0px"
    >
      <u-empty
        icon="/static/detail/love-empty.png"
        text="爱心捐助可直达基地，小猫咪也期待过上更丰富的生活"
      />
    </view>
  </view>
</template>

<script>
import { selectLoveById } from '@/api/detail.js';
import adoptPopup from './adoptPopup.vue';
export default {
  components: {
    adoptPopup,
  },
  props: {
    list: {
      type: Object,
    },
  },
  data() {
    return {
      loveObj: {},
      page: {
        current: 1,
        size: 10,
      },
      adoptVisible: false,
    };
  },
  watch: {
    list: {
      immediate: true, // 立即触发回调函数，即使没有变化
      handler(val) {
        if (val && val.id) {
          this.selectLoveById();
        }
      },
    },
  },
  mounted() {
    // this.selectLoveById();
  },
  methods: {
    //全部捐助记录
    adoptall() {
      this.adoptVisible = true;
    },
    async selectLoveById() {
      try {
        const { data } = await selectLoveById(this.list.id);
        this.loveObj = data;
        console.log('ddd', data);
      } catch (e) {
        throw new Error(e);
      }
    },
  },
};
</script>

<style lang="scss">
.love-list {
  .love-count {
    background: #dbf9cf;
    border-radius: 16rpx;
    padding: 0px 16rpx 16rpx 16rpx;
    box-sizing: border-box;

    .count {
      font-weight: 600;
      font-size: 40rpx;
      color: #333333;
    }
  }
  .data-all {
    padding: 14rpx 0px 13px 0px;
    text-align: center;
    box-sizing: border-box;
    color: #2b9b00;
  }
  .list-all {
    background-image: linear-gradient(180deg, #ffffffcc 0%, #ffffff 98%);
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 24rpx;
    box-sizing: border-box;

    .all {
      .all-text {
        font-weight: 600;
        font-size: 28rpx;
        color: #333333;
      }
    }
    .donate-all {
      background: #f1f1f1;
      border-radius: 24rpx;
      padding: 8rpx 18rpx;
      box-sizing: border-box;
    }
  }
  .ten {
    margin: 24rpx 0;
    .ten-text {
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
      margin-left: 10rpx;
    }
  }
  .one {
    color: #34bf00;
    background-image: linear-gradient(180deg, #ffffff 0%, #f5fdf2 100%);
  }
  .two {
    color: #ed3ec8;
    background-image: linear-gradient(180deg, #ffffff 0%, #f5fdf2 100%);
  }
  .three {
    color: #9f4503;
    background-image: linear-gradient(180deg, #ffffff 0%, #f5fdf2 100%);
  }
  .love-rank {
    margin-top: 32rpx;
    position: relative;
    .love-images {
    }
    .love-top {
      position: absolute;
      left: 14px;
      top: -28rpx;
    }
    .index {
      font-size: 32rpx;
      margin-right: 30rpx;
    }
    .rank-name {
      font-weight: 600;
      font-size: 28rpx;
      color: #333333;
      margin-left: 18rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 130px;
      word-break: break-all;
      overflow-wrap: break-word;
    }
    .rank-tag {
      font-weight: 500;
      font-size: 12px;
      color: #f05ac7;
      padding: 8rpx 12rpx;
      box-sizing: border-box;
      text-align: center;
      background: #ffe3f7;
      border-radius: 20rpx;
      margin-left: 12rpx;
    }
    .count-name {
      font-weight: 400;
      font-size: 14px;
      color: #666666;
    }
    .count {
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
      margin-left: 12rpx;
    }
  }
}
</style>
